<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <span @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </span>
            <h3>开药门诊</h3>
            <span></span>
        </div>
        <main>
            <!-- 凭方购药 -->
            <div class="buyMedicine" @click="toShopSearch">
                <!-- <div class="buyMedicineTop">
                    左侧
                    <div class="buyMedicineTop-l">
                        <h2>凭方购药</h2>
                        <span class="describe">须持有纸质或电子处方</span>
                    </div>
                    右侧
                    <div class="buyMedicineTop-r"></div>
                </div> -->
                <img src="../../assets/home-img/凭方购药.png" alt="">
            </div>
            <!-- 复诊开方 -->
            <div class="square" @click="toSquareRoot">
                <img src="../../assets/home-img/复诊开方1.png" alt="">
            </div>
        </main>
    </div>
</template>

<script setup>
import router from "@/router";
import { ref } from "vue";

const back = () => {
    // router.push("/home");
    history.back();
}

// 跳商城搜索
const toShopSearch = () => {
    router.push('/shopss');
}

// 跳转复诊开方
const toSquareRoot = () => {
    router.push('/squareRoot');
}
</script>

<style lang="scss" scoped>
.big {
    width: 100%;
    height: 100%;
    background-color: #fbfbfb;

    .navigation {
        width: 100%;
        height: 92px;
        display: flex;
        background-color: #fff;
        justify-content: space-around;
        align-items: center;

        h3 {
            flex: 1;
            text-align: center;
            font-size: 35px;
        }

        span {
            width: 40px;
            padding-top: 7px;

            img {
                width: 40px;
                height: 40px;
                margin: 0 10px;
            }
        }
    }

    main {
        width: 88%;
        height: 100%;
        margin: 0 auto;

        .buyMedicine {
            width: 100%;
            height: 610px;
            background-color: #fff;
            border-radius: 30px;
            margin: 25px auto;

            .buyMedicineTop {
                width: 100%;
                height: 190px;
                border-radius: 25px;
                background-color: #55cb91;
                display: flex;
                justify-content: space-between;

                .buyMedicineTop-l {
                    width: 50%;
                    height: 100%;
                    padding-top: 30px;
                    padding-left: 40px;

                    h2 {
                        font-weight: 550;
                        color: #fff;
                        letter-spacing: 4px;
                        font-family: '微软雅黑';
                    }

                    .describe {
                        margin-top: 30px;
                    }
                }

                .buyMedicineTop-r {
                    width: 50%;
                    height: 100%;
                }
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .square {
            width: 100%;
            height: 575px;
            background-color: #fff;
            border-radius: 30px;
            margin:auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
